<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body{
			background:  #222;
		}
		.sx-foot,.sx-info{
			background: #222;
			padding: 0.75rem;
			font-size: 0.75rem;
			border-radius: 0.5rem;
			box-shadow: 0px 0px 5px 0px #222;
			margin: 1rem 0;
		}
		.h2{
			padding: 0;
			font-size: 0.8rem;
			font-weight: bold;
			padding-bottom: 0.5rem;
			border-bottom: 1px solid #333;
			margin-bottom: 0.5rem;
			color: #fff;
		}
		.h2 em{
			display: inline-block;
			width: 3px;
			height: 0.85rem;
			background: #ffc107;
			margin-right: 0.35rem;
			vertical-align: middle;
		}
		.h2 i{
			font-size: 0.75rem;
		}
		.sx-foot .p .r{
		 	opacity: 0.8
		}
		.sx-foot .p .s{
			display: flex;
			padding: 0.25rem 0;
		}
		.sx-foot .p .s .l{
			background: #ffc107;
			border-radius: 50%;
			font-size: 0.65rem;
			height: 1rem;
			line-height: 1rem;
			width: 1.1rem;
			text-align: center;
			font-weight: 200;
		}
		.sx-foot .p .s .r{
			padding-left: 0.5rem;
			width: 100%;
		}
		.sx-top{
			/* background: url('../i/jinbi/yaoqing.png'); */
			/* background-repeat: no-repeat;
			background-position: top;
			background-size:cover; */
			position: relative;
		}
		.sx-top .b{
			position: relative;
			text-align: center;
		}
		.sx-btn{
			background: #ffc107;
			color: #fff;
			width: 10rem;
			text-align: center;
			border-radius: 1rem;
			padding: 0.5rem 0;
			font-size: 0.85rem;
			margin: 0 auto;
		}
		.sx-top p{
			padding: 0.75rem 0;
			padding-bottom: 0;
			line-height: 1.5rem;
		}
		.sx-top .t{
			text-align: center;
			padding: 1rem 0;
		}
		.sx-top .t p{
			font-weight: bold;
			font-size: 0.8rem;
			padding: 0;
			letter-spacing: 2px
		}
		.sx-top .t p span{
			color: #ffc107;
			font-size: 1.2rem;
		}
		.sx-info{

		}
		.aui-content-padded{
			padding: 0.75rem;
			margin: 0;
		}
		.list .p span{
			display: inline-block;
			color: #fff;
			opacity: 0.7;
			font-size: 0.65rem;
		}
		.list .p{
			text-align: center;
		}
		.list .p p{
			font-size: 0.85rem;
			padding-top: 0.25rem;
		}
		.list h3{
			color: #fff;
			font-weight: bold;
			font-size: 0.7rem;
			opacity: 0.7
		}
		.sx-fuzhi{
			font-size: 0.75rem;
			margin-top: 0.5rem;
			margin-bottom: 0.258rem;
		}
		.sx-fuzhi span:last-child{
			border: 1px solid #fff;
			margin-left: 0.5rem;
			border-radius: 1rem;
			padding: 0.15rem 0.55rem;
			font-size: 0.65rem;
			letter-spacing: 2px
		}
		.yaoqingbtn{
			width:60%;
			margin-left: 20%;	
			animation: scale 0.4s ease-in-out infinite alternate
		}
		@keyframes scale {
			from {
				transform: scale(1);
			}
			to {
				transform: scale(0.9);
			}
		}
	</style>
</head>

<body>
	<div class="aui-content" style="margin-top: 40%;">
		<div class="sx-top">
			<div class="t" id="yaoqing">

			</div>
			<div class="b">
				<!-- <div class="sx-btn sx-btn-animation" tapmode onclick="_url({url:'member_yaoqing_poster',title:'生成海报'})">立即邀请好友</div> -->
				 <img src="../i/yaoisbtn.png"tapmode onclick="_url({url:'member_yaoqing_poster',title:'生成海报'})" class="yaoqingbtn sx-btn-animation"/>
				<p class="sx-fuzhi" tapmode >我的邀请码：<span id="yqmcode"></span><span>复制</span></p>
			</div>
		</div>
	</div>
	<div class="aui-content aui-content-padded aui-padded-t-5" style="display: none;">
		<div class="sx-info">
			<div class="h2 aui-card-list-footer" tapmode onclick="_url({url:'member_yaoqing_text',title:'团队说明'})">
				<span><em></em>团队统计</span>
				<span ><i class="aui-iconfont aui-icon-question"></i></span>
			</div>
			<div class="list">
				<div class="aui-card-list-footer tongji_1">
					<h3>直接好友</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
				<div class="aui-card-list-footer tongji_2">
					<h3>间接好友</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
				<div class="aui-card-list-footer tongji_3">
					<h3>次接好友</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
			</div>
		</div>
		<div class="sx-foot">
			<div class="h2">
				<em></em>邀请小技巧
			</div>
			<div class="p" id="yaoqing_text">

			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
			var inputText="";
			
			// 复制
		
			apiready=function(){
				data();
				_ajax('member/info',function(ret){
	                  // console.log(ret);
							$('#yqmcode').text(ret.yqm);
							// $('#yaoqing').html(_getPrefs('_config').yaoqing.s_text);
							// $('#yaoqing_text').html(_getPrefs('_config').yaoqing.text);
							inputText=ret.yqm;
							// alert(inputText)
						})
						$(".sx-fuzhi").on("click",function(){
							var _user=_getPrefs("_user");
							
								var clipBoard = api.require('clipBoard');
								clipBoard.set({
									value : _user.yqm
								}, function(ret, err) {
									if (ret) {
										_msg("邀请码复制成功!");
									}
								});
						})
						
						
						}
						
	
			function data() {
				_ajax('renwu/yaoqing', function(ret, err) {
					
					if (ret) {
						var tongji = ret.tongji;
						for (var i = 0; i < 3; i++) {
							for (var i_s = 0; i_s < tongji['s' + (i + 1)].length; i_s++) {
								$('.tongji_' + (i + 1) + ' p').eq(i_s).text(tongji['s' + (i + 1)][i_s]);
							}
						}
					} else {
						alert(JSON.stringify(err))
					}
				})
			}
	function hb(){
			  window.location.href="member_yaoqing_poster.html";
			  
	}
			function urls() {
				window.location.href = "member_yaoqing_poster";
			}
			
			
			// 复制
			// $(".sx-fuzhi").on("click",function(){
			// 	var clipboard = new ClipboardJS('#cope');
			// 	/*复制成功或失败后提示，不需要可删除*/
			// 	clipboard.on('success', function(e) {
			// 		alert('已经复制到剪切版'); 
			// 	});
			// 	clipboard.on('error', function(e) {
			// 		console.log('复制失败');
			// 	});
			// 	$(".yqmcode").css("-webkit-user-select","text")
			// 	$(".yqmcode").css("user-select","text")
			// })
</script>

</html>
